<template>
    <div class="home" @click.stop.prevent="visible=false">
        <div class="header">chat ({{'在线:' + online + '人' }}) <i class="el-icon-user" @click="showOnlineInfo"></i></div>
        <main ref="main">
            <div class="msg-box" id='message' @scroll="scrollMessage">
                <div v-for="(item,index) in messageList" :key='index+" list"' :class="{isJustify:item.userId==userId}"
                    :style="index ==0 || index>0 && (item.time != messageList[index-1].time) ?'padding-bottom:0':'padding-bottom:0;padding-top:18px'">
                    <!-- 头像 -->
                    <img @click="showUserInfo(item)" class="img" :src="BaseUrl + item.avator" alt="" v-if="item.userId!=userId">
                    <!-- 时间 -->
                    <span class="time" v-if="index==0">{{timeFormat(item.time)}}</span>
                    <span class="time" v-if="index>0 && (item.time != messageList[index-1].time)">{{timeFormat(item.time)}}</span>
                    <!-- 名称 -->
                    <span class="name" v-if="item.userId!=userId">{{item.name}}</span>
                    <span class="name_own" v-else>{{item.name}}</span>
                    <!-- 文本消息 -->

                    <span class="message" v-if="item.userId!=userId && item.type=='text'"
                        @touchstart.stop.prevent="gtouchstart($event,item)" @touchmove="gtouchmove(item)"
                        @touchend="showDeleteButton(item)">{{item.message}}</span>
                    <span class="message_own" v-else-if="item.type=='text'" @touchstart.stop.prevent="gtouchstart($event,item)"
                        @touchmove="gtouchmove(item)" @touchend="showDeleteButton(item)">{{item.message}}</span>
                    <!-- 图片消息 -->
                    <img class="message_img" ref="message_img" @touchstart.stop.prevent="gtouchstart($event,item)"
                        @touchmove="gtouchmove(item)" @touchend="showDeleteButton(item)" :src="BaseUrl+item.message"
                        v-if="item.userId!=userId && item.type=='img'" alt="">
                    <img class="message_img_o" ref="message_img_o" @click.stop.prevent="false"
                        @touchstart.stop.prevent="gtouchstart($event,item)" @touchmove="gtouchmove(item)" @touchend="showDeleteButton(item)"
                        :src="BaseUrl + item.message" v-else-if="item.type=='img'" alt="">

                    <!-- 头像 -->
                    <img @click="showUserInfo(item)" :src="BaseUrl + item.avator" alt="" class="img_o" v-if="item.userId==userId">
                </div>
            </div>
        </main>
        <footer style="" ref="footer">
            <div class="ipt">
                <img src="../assets/static/face.png" v-if="!showDialog" @click="faceClick" alt="" style="width:30px;">
                <img src="../assets/static/close.png" v-if="showDialog" @click="faceClick" alt="" style="width:30px;">
                <img src="../assets/static/picture.png" @click="pictureClick" style="width:30px;;margin-left:5px;" alt="">
                <img src="../assets/static/video.png" @click="openVideoCall" style="width:30px;;margin-left:5px;" alt="">
                <el-input ref="ipt" v-model="sendMessage" style="width:60%;margin-left:10px;" @paste.native="pasteImg($event)" id='ipt'
                    type="textarea" resize='none' :autosize='{ minRows: 1, maxRows: 5}' @focus='inputFocus' placeholder="ctrl+enter发送"
                    @keyup.enter.native='send' maxlength='800'>
                    <!--  @keyup.enter.native='send' -->
                </el-input>
                <transition name="el-fade-in-linear">
                    <el-button style="margin-left:15px" type="success" @click.stop="sendMsg" v-if="sendMessage">
                        发送
                    </el-button>
                </transition>
            </div>
            <div class="emoji" v-show="showDialog">
                <VEmojiPicker @select="selectEmoji" :showSearch='false' @changeCategory='changeCategory' :dark='false' />
            </div>
        </footer>

        <transition name='el-fade-in-linear'>
            <div class="tankuang" v-show="visible" ref="tankuang">
                <!-- 自己的消息才能撤回 -->
                <span @click.stop.prevent="backMessage" v-if="item.userId==userId && isShowback">撤销</span>
                <!-- 复制的是文本 -->
                <span @click.stop.prevent="copy" v-if="item.type=='text'">复制</span>
                <span @click.stop.prevent="transSend">转发</span>
            </div>
        </transition>
        <el-dialog title="个人信息" :visible.sync="dialogVisible" width="80%">
            <div class="info">
                <ul>
                    <li>{{userInfo.name}}</li>
                    <li>账号：{{userInfo.username}}</li>
                    <li>头像：<img :src="BaseUrl + userInfo.avator" @click="previewImage(BaseUrl + avator)" alt=""></li>
                    <li>性别：
                        <el-select style="width: 180px;" v-model="userInfo.sex" placeholder="请选择性别" disabled>
                            <el-option label="男" :value="1"></el-option>
                            <el-option label="女" :value="0"></el-option>
                            <el-option label="不显示" :value="-1"></el-option>
                        </el-select>
                    </li>
                    <li>
                        年龄：
                        <el-select style="width: 180px;" v-model="userInfo.age" placeholder="请选择年龄" disabled>
                            <el-option v-for="item in 100" :key="item" :label="item+'岁'" :value="item">
                            </el-option>
                        </el-select>
                    </li>
                    <li>
                        个性签名：{{userInfo.sign}}
                    </li>
                </ul>
            </div>
            <div slot="footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>

        <Drawer :visible="drawerVisible" type="right" show-close @close='onDrawerClose'>
            <div v-for="(item,index) in onlineUserList" :key="'onlineUserList'+index" class="userlist">
                <div class="avator" @click="showUserInfo(item)">
                    <img :src="BaseUrl + item.avator" alt="">
                </div>
                <div>{{ item.name }}</div>
            </div>
        </Drawer>
    </div>
</template>

<script type="text/javascript">
import { VEmojiPicker } from 'v-emoji-picker'
import Drawer from '@/components/base/drawer.vue'
import previewImage from '@/tools/previewImage'
import IP, { BaseUrl } from '../Api/config'
export default {
    name: 'home-vue',
    components: {
        VEmojiPicker, Drawer
    },

    props: {},

    data() {
        return {
            name: '',
            username: "",
            avator: "",
            sendMessage: "",
            userId: "",
            messageList: [],
            online: 0,
            onlineUserIds: [],
            onlineUserList: [],
            isShowback: false,
            BaseUrl,
            item: {},
            drawerVisible: false,
            scrollHeight: 0,

            showDialog: false,

            visible: false,

            userInfo: {},
            dialogVisible: false,

        }
    },

    computed: {

    },

    watch: {
        sendMessage() {
            this.setMainHeight();
        }
    },

    created() {
        this.name = localStorage.getItem('name');
        this.username = localStorage.getItem('username');
        this.avator = localStorage.getItem('avator');
        this.userId = localStorage.getItem('user-id');
        this.token = localStorage.getItem('token') || '',
            // getMessageList
            this.getMessageList();
        this.condition = process.env.NODE_ENV;
    },

    // 消失
    deactivated() {
    },
    // 激活
    activated() {
        console.log(111, '激活')
        this.$nextTick(() => {
            // this.getMessageList();
            let avator = localStorage.getItem('avator');
            let name = localStorage.getItem('name');

            if (avator != this.avator || this.name != name) {
                this.getMessageList();
            }
            this.avator = avator;
            this.name = name;
            let div = document.getElementById('message');
            div.scrollTo({ top: div.scrollHeight + 300 });

        })
    },
    mounted() {
        this.init();
        // this.focus();

        this.footer = this.$refs.footer;
        this.main = this.$refs.main;

        // window.addEventListener('scroll', () => {
        //     this.visible = false;
        // })
    },
    beforeDestroy() {
        clearInterval(this.timeBar);
    },
    destroyed() {
        this.socket.close()// 关闭连接
        clearInterval(this.timeBar);
        console.log(111, '销毁')
    },

    methods: {
        previewImage,
        // 查看在线信息
        async showOnlineInfo() {
            let len = this.onlineUserIds.length;
            this.onlineUserList = [];
            this.drawerVisible = true;
            console.log(this.onlineUserIds)
            try {
                for (let i = 0; i < len; i++) {
                    let result = await this.$http.get('/getUserInfo', { userId: this.onlineUserIds[i] });
                    this.onlineUserList.push(result);
                }
            } catch (error) {
                console.log(error)
            }

        },
        onDrawerClose() {
            this.drawerVisible = false;
        },
        // 打开视频通话页面
        openVideoCall() {
            window.open(`/video.html`)
        },
        scrollMessage() {
            this.visible = false;
        },
        // 转发
        transSend() {
            this.visible = false;
            if (this.item.type == 'text') {
                this.socket.send(JSON.stringify({
                    message: this.item.message,
                    avator: this.avator,
                    name: this.name,
                    time: new Date().format('yyyy-MM-dd hh:mm'),
                    type: 'text'
                }))

            }
            if (this.item.type == 'img') {

                this.socket.send(JSON.stringify({
                    message: this.item.message,
                    avator: this.avator,
                    name: this.name,
                    time: new Date().format('yyyy-MM-dd hh:mm'),
                    type: "img"
                }))
            }

            this.$msg.success({
                message: "转发成功",
                duration: 500,
                showClose: true
            })
        },
        // 图片
        pictureClick() {
            let condition = process.env.NODE_ENV
            let url = BaseUrl + "/sendImg";
            let that = this;
            let ld = null;
            this.$upload({
                url,
                headers: {
                    'user-id': localStorage.getItem('user-id'),
                    'token': localStorage.getItem('token') || ''
                },
                data: {
                    avator: this.avator,
                    name: this.name,
                    // time: new Date().format('yyyy-MM-dd hh:mm')
                },
                onConfirm(formdata) {
                    // 确定键往表单添加 字段
                    // console.log(111);
                    formdata.append('time', new Date().format('yyyy-MM-dd hh:mm'));
                    // formdata.append('timestamp', new Date().getTime());
                    ld = that.$loading.service({});
                },
                multiple: true,
                // accept: 'image/*,video/*',
                accept: 'image/*',
                onSuccess(res) {
                    // console.log(res) 
                    ld.close();
                    if (res.code == 1) {
                        that.$msg.success({
                            message: "发送成功",
                            duration: 500,
                            showClose: true,
                        })
                        // 加载完毕获取到底部距离
                        that.imgLoad();

                    } else {
                        if (res.code == -1) {
                            that.$msg.error({
                                message: res.message,
                                duration: 500,
                                showClose: true,
                            })
                            setTimeout(() => {
                                that.$router.replace('/login')
                            }, 1000);
                            return
                        }
                        that.$msg.warning({
                            message: res.message,
                            duration: 500,
                            showClose: true,
                        })

                    }
                },
                onError() {
                    ld.close();
                    // console.log(111);
                    that.$msg.error({
                        message: "网络错误",
                        duration: 500,
                        showClose: true,
                    })

                }
            })
        },

        pasteImg(event) {
            //粘贴上传图片
            let txt = event.clipboardData.getData('Text')
            if (typeof (txt) == 'string' && txt !== '') {
                //检测到是文字，过滤
                return;
            }
            const items = (event.clipboardData || window.clipboardData).items;
            this.handleChange(items[0].getAsFile())
        },
        // 图片上传
        handleChange(file) {
            let formData = new FormData()
            formData.append('file', file.raw || file);
            formData.append('time', new Date().format('yyyy-MM-dd hh:mm'));
            formData.append('avator', this.avator);
            formData.append('name', this.name);
            this.$http.post('/sendImg', formData, {
                "Content-Type": 'multipart/form-data',
                'user-id': localStorage.getItem('user-id'),
            }).then(() => {
                this.$msg.success({
                    message: "发送成功",
                    duration: 500,
                    showClose: true,
                })
                // 加载完毕获取到底部距离
                this.imgLoad();
            }, (error) => {
                console.log(error)
            });
        },

        // 监听图片加载完毕，到底部
        imgLoad() {
            // 加载完毕获取到底部距离
            // 判断是否有消息
            if (this.$refs.message_img) {
                this.$refs.message_img.forEach((item) => {
                    if (item.complete) return
                    item.onload = () => { this.to_footer(); }
                })
            }
            if (this.$refs.message_img_o) {
                this.$refs.message_img_o.forEach((item) => {
                    if (item.complete) return
                    item.onload = () => { this.to_footer(); }
                })
            }
        },
        // 复制 到剪贴板
        copy() {
            var input = document.createElement('input');
            document.body.appendChild(input);
            input.setAttribute('value', this.item.message);
            input.select();
            document.execCommand("copy"); // 执行浏览器复制命令
            if (document.execCommand('copy')) {
                document.execCommand('copy');
                this.$msg.success({
                    message: "复制成功",
                    duration: 500,
                    showClose: true,
                })
                this.visible = false;
            } else {
                this.$msg.error({
                    message: "复制失败",
                    duration: 500,
                    showClose: true,
                })
            }
            document.body.removeChild(input);
        },

        // 撤回消息
        backMessage() {
            this.$http.get('/backMessage', {
                id: this.item.id,
                currentTime: new Date().getTime()
            }).then(() => {
                this.$msg.success({
                    message: "撤回成功",
                    duration: 500,
                    showClose: true,
                })
                // this.item.timestamp = res.timestamp || 0
                this.visible = false;
            }).catch(err => err)
        },
        /** */
        //长按事件（起始）
        gtouchstart($event, item) {
            var self = this;
            this.visible = false;
            this.timeOutEvent = setTimeout(function () {
                self.longPress($event, item);
            }, 300); //这里设置定时器，定义长按500毫秒触发长按事件
            return false;
        },
        //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
        showDeleteButton(item) {
            clearTimeout(this.timeOutEvent); //清除定时器
            if (this.timeOutEvent != 0) {
                //这里写要执行的内容（如onclick事件）
                console.log("点击但未长按", item);
                if (item.type == 'img') {
                    let url = this.BaseUrl + item.message;
                    // console.log(url)
                    this.$preview.show(url)
                }

            }
            return false;
        },

        //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
        gtouchmove() {
            clearTimeout(this.timeOutEvent); //清除定时器
            this.timeOutEvent = 0;
        },

        //真正长按后应该执行的内容
        longPress($event, val) {
            let pageX = $event.targetTouches[0].pageX;
            let pageY = $event.targetTouches[0].pageY;
            this.timeOutEvent = 0;
            // console.log(val)
            this.item = val;
            let box = this.$refs.tankuang;

            box.style.left = pageX + 'px';
            box.style.top = pageY + 'px';
            this.visible = true;
            this.isShowback = (new Date().getTime() - this.item.timestamp) <= 120 * 1000

        },
        /** */


        // 选择表情
        selectEmoji(emoji) {// 选择emoji后调用的函数
            let input = document.getElementById('ipt');
            let startPos = input.selectionStart
            let endPos = input.selectionEnd
            let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
            input.value = resultText
            input.focus();
            input.selectionStart = startPos + emoji.data.length;
            input.selectionEnd = startPos + emoji.data.length;
            input.blur();
            this.sendMessage = resultText;
        },

        changeCategory() {
            let emoji = document.getElementsByClassName('container-emoji')[0];
            emoji.scrollTop = 0;
        },

        focus() {
            this.$refs.ipt.focus();
        },

        getMessageList() {
            this.$http.get('/messageList', {}).then((res) => {
                this.messageList = res || [];
                this.$nextTick(() => {
                    this.to_footer();
                    this.imgLoad();
                })
            }).catch(() => { })
        },

        faceClick() {
            this.showDialog = !this.showDialog;
            this.setMainHeight();
        },

        // 重新计算高度
        setMainHeight() {
            // 异步执行
            setTimeout(() => {
                let footerHeight = parseInt(getComputedStyle(this.footer).height);
                let setValue = (110 - 60) + footerHeight;
                this.main.style.height = `calc(100% - ${setValue}px)`;
                this.to_footer();
            }, 0);
        },

        send(e) {
            console.log(e)
            // ctrl + enter 发送消息
            if (e.ctrlKey && e.keyCode == 13) {   //用户点击了ctrl+enter触发
                this.sendMsg();
            }
            // 计算高度
            if (e.keyCode == 13) {
                this.setMainHeight();
            }
        },

        sendMsg() {
            if (!this.sendMessage) return;
            this.socket.send(JSON.stringify({
                message: this.sendMessage,
                avator: this.avator,
                name: this.name,
                time: new Date().format('yyyy-MM-dd hh:mm')
            }))
            this.sendMessage = "";
            // emoji弹窗打开 禁止发送消息后聚焦
            if (this.showDialog) {
                return
            }
            // 聚焦
            this.focus();
        },


        // webSoket
        init() {
            if (typeof (WebSocket) === "undefined") {
                alert("您的浏览器不支持socket")
            } else {
                let url = ''
                url = `ws://${IP}/connect?token=${this.token}`
                this.socket = new WebSocket(url, this.userId) // 实例化socket
                this.socket.onopen = this.open// 监听socket连接
                this.socket.onerror = this.error // 监听socket错误信息
                this.socket.onmessage = this.getMessage   // 监听socket消息
                this.socket.onclose = this.close   // 关闭socket消息
            }
        },
        open() {
            console.log("socket连接成功");
            // 传输数据
            this.getOnline();
            this.timeBar = setInterval(() => {
                this.getOnline();
            }, 3000);
        },
        error() {
            this.$msg.error("连接错误")
        },
        getOnline() {
            this.onlineUserIds = [];
            this.$http.get('/getOnlinePerson').then((res) => {
                this.online = res.onlinePerson.num;
                this.onlineUserIds = res.onlinePerson.userIds;
            })
        },
        getMessage(msg) {
            let val = JSON.parse(msg.data);
            console.log(val)
            this.online = val?.onlinePerson.num
            this.onlineUserIds = val?.onlinePerson.userIds;
            // 判断用户是否存在
            if (val.isExitsUser) {
                this.$msg.error({
                    message: val.message,
                    showClose: true,
                    duration: 1000
                })
                setTimeout(() => {
                    this.$router.replace('/login')
                }, 1000);
                return
            }
            // 撤回消息
            if (val.type == 'backMessage') {
                const { result } = val
                this.messageList.some((item, index) => {
                    if (item.id == result.id) {
                        this.messageList.splice(index, 1);
                        return true
                    }
                })
                return
            }

            // 发送消息
            this.messageList.push(val);
            this.$nextTick(() => {
                this.to_footer();
                this.imgLoad();
            })
            // console.log(val, 'val')
            if (val.userId != this.userId) {
                // 移动端不支持放最后
                let utterThis = new window.SpeechSynthesisUtterance('你有一条新消息');
                window.speechSynthesis.speak(utterThis);

                // var notify = new iNotify({
                //     message: '有消息了。',//标题
                //     effect: 'flash', // flash | scroll 闪烁还是滚动
                //     openurl: "http://www.bing.com", // 点击弹窗打开连接地址
                //     onclick: function () { //点击弹出的窗之行事件
                //         console.log("---")
                //     },
                //     //可选播放声音
                //     audio: {
                //         //可以使用数组传多种格式的声音文件
                //         file: ['msg.mp4', 'msg.mp3', 'msg.wav']
                //         //下面也是可以的哦
                //         //file: 'msg.mp4'
                //     },
                //     //标题闪烁，或者滚动速度
                //     interval: 1000,
                //     //可选，默认绿底白字的  Favicon
                //     updateFavicon: {
                //         // favicon 字体颜色
                //         textColor: "#fff",
                //         //背景颜色，设置背景颜色透明，将值设置为“transparent”
                //         backgroundColor: "#2F9A00"
                //     },
                //     //可选chrome浏览器通知，默认不填写就是下面的内容
                //     notification: {
                //         title: "通知！",//设置标题
                //         icon: "",//设置图标 icon 默认为 Favicon
                //         body: '您来了一条新消息'//设置消息内容
                //     }
                // })

                // console.log(notify)

            }

        },
        close() {
            console.log("socket已经关闭")
            clearInterval(this.timeBar);
        },

        // 聚焦
        inputFocus() {
            this.$nextTick(() => {
                setTimeout(() => {
                    let div = document.getElementById('message');
                    if (div.scrollHeight)
                        div.scrollTo({ top: div.scrollHeight + 300, behavior: "smooth" });
                }, 200);
            })
        },

        // 到底部
        to_footer() {
            let div = document.getElementById('message');
            div.scrollTop = div.scrollHeight;
            this.scrollHeight = div.scrollHeight;
        },

        timeFormat(string) {
            // console.log(string)
            let stringDate = string.slice(0, 10);
            let stringTime = string.slice(10);
            let currentDate = new Date().format('yyyy-MM-dd');
            if (stringDate == currentDate) {
                return stringTime
            } else {
                return string
            }
        },

        showUserInfo(item) {

            this.dialogVisible = true;
            this.$http.get('/getUserInfo', {
                userId: item.userId || item.id
            }).then((res) => {
                console.log(res)
                this.userInfo = res || {
                    name: "此用户不存在",
                    username: "此用户不存在",
                    sex: -1,
                    age: -1,
                    sign: "",
                    avator: "/404.jpg"
                };
            })
            // userId,getUserInfo
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    height: calc(100% - 10px);
    position: relative;
    padding: 10px 15px;
    padding-bottom: 0;
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    background: #f5f5f5;
    .header {
        height: 20px;
        line-height: 20px;
        font-size: 15px;
        margin-top: -10px;
        text-align: center;
        i {
            color: #95ec69;
            font-size: 18px;
        }
    }
    main {
        padding: 10px 0;
        padding-bottom: 20px;
        // 默认
        // height: calc(100% - 142px);
        height: calc(100% - 82px);
        // border-bottom: solid #ccc 1px;
        // transition: all 0.2s;

        .msg-box {
            height: 100%;
            overflow: auto;
            .isJustify {
                // justify-content: right;//移动端
                justify-content: flex-end; //适配移动端和电脑端
            }
            > div {
                padding: 35px 0;
                position: relative;
                display: flex;
                flex-wrap: nowrap;
                &:last-child {
                    padding-bottom: 5px !important;
                }
                img {
                    width: 50px;
                    height: 50px;
                    object-fit: cover;
                    display: inline-block;
                    border-radius: 50%;
                }

                .time {
                    position: absolute;
                    display: block;
                    top: 15px;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 12px;
                }

                .name {
                    position: absolute;
                    left: 62px;
                    display: block;
                    font-size: 12px;
                }

                .name_own {
                    position: absolute;
                    right: 62px;
                    display: block;
                    font-size: 12px;
                }

                .message {
                    margin: 5px 65px 15px 12px;
                    margin-top: 5px;
                    padding: 10px;
                    background: #95ec69;
                    border-radius: 5px;
                    transform: translateY(18px);
                    position: relative;
                    white-space: pre-wrap;
                    word-break:break-all;
                    // 清除浏览器默认长按行为
                    -webkit-touch-callout: none !important;
                    -webkit-user-select: none;
                    &::before {
                        content: '';
                        display: inline-block;
                        content: '';
                        position: absolute;
                        left: -12px;
                        top: 14px;
                        border: 5px solid transparent;
                        border-right: 8px solid #95ec69;
                    }
                }

                .message_own {
                    // 清除浏览器默认长按行为
                    -webkit-touch-callout: none !important;
                    -webkit-user-select: none;
                    margin: 5px 12px 15px 65px;
                    margin-top: 5px;
                    padding: 10px;
                    background: #95ec69;
                    word-break:break-all;
                    border-radius: 5px;
                    transform: translateY(18px);
                    position: relative;
                    white-space: pre-wrap;
                    &::after {
                        content: '';
                        position: absolute;
                        right: -12px;
                        top: 14px;
                        display: block;
                        border: 5px solid transparent;
                        border-left: 8px solid #95ec69;
                    }
                }

                .message_img {
                    margin-top: 25px;
                    margin-left: 10px;
                    border-radius: 0;
                    width: 120px;
                    height: auto;
                    max-height: 180px;
                    // height: 180px;
                    border-radius: 2px;
                    object-fit: cover;
                    box-shadow: 0px 1px 10px 1px rgb(152, 188, 231);
                    -webkit-touch-callout: none;
                }

                .message_img_o {
                    margin-top: 25px;
                    margin-right: 10px;
                    border-radius: 0;
                    width: 120px;
                    height: auto;
                    max-height: 180px;
                    -webkit-touch-callout: none;
                    // height: 180px;
                    border-radius: 2px;
                    object-fit: cover;
                    box-shadow: 0px 1px 10px 1px rgb(152, 188, 231);
                }
            }
        }
    }
    footer {
        min-height: 32px;
        transition: all 1s;
        .ipt {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .emoji {
            height: 225px;
            margin: 20px 0;
            overflow: hidden;
            // overflow-x: hidden;
            .emoji-picker {
                width: 100%;
                height: calc(100%);
                position: relative;
                /deep/ #Categories {
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                /deep/ #InputSearch {
                    display: none;
                }

                /deep/ #Emojis {
                    padding-top: 30px;
                }
            }
        }
    }

    .tankuang {
        font-size: 14px;
        font-weight: 400;
        background: rgba(0, 0, 0, 0.782);
        color: white;
        position: fixed;
        top: 0;
        left: 0;
        transform: translate(-50%, -200%);
        border-radius: 4px;
        padding: 5px 10px;
        // height: 20px;
        max-width: 150px;
        min-width: 50px;
        line-height: 20px;
        text-align: center;
        span {
            margin-right: 4px;
        }
    }

    ul {
        li {
            padding: 10px;
            display: flex;
            justify-content: space-between;
            i {
                font-size: 18px;
            }
        }
    }

    .el-dialog {
        .info {
            ul {
                li {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img {
                        width: 50px;
                        height: 50px;
                        object-fit: cover;
                    }
                }
            }
        }
    }
}

.drawer {
    .userlist {
        padding: 25px 20px;
        display: flex;
        font-size: 16px;
        border-bottom: solid #ccc 1px;
        .avator {
            width: 50px;
            height: 50px;
            margin-right: 20px;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                filter: brightness(100%);
                object-fit: cover;
            }
        }
    }
}
</style>